<template>
    <div class="home">
        <div class="title1">
            <div class="logo"></div>
            <div class="title1-text">杭州市第二公墓</div>
        </div>
        <!-- <div class="title2">政府搭台 · 公正透明 · 便捷高效 · 服务民生</div> -->
        <div class="title2">尊重生命 · 服务生命</div>
        <main>
            <div class="box box-11" @click="tips('/sweepGraveAppointment')">
                <div class="box-img"></div>
                <div>预约扫墓</div>
            </div>
            <div class="box box-17" @click="tips('/buryAppointment')">
                <div class="box-img"></div>
                <div>预约安葬</div>
            </div>
            <div class="box box-12" @click="tips('/lookTombAppointment')">
                <div class="box-img"></div>
                <div>预约看墓</div>
            </div>
            <!-- <div class="box box-26" @click="$router.push('/cloudSacrifice')">
                <div class="box-img"></div>
                <div>云扫墓</div>
            </div> -->
            <div class="box box-23" @click="$router.push('/navigate')">
                <div class="box-img"></div>
                <div>导航</div>
            </div>
            <div class="box box-5" @click="$router.push('/businessInquiry')">
                <div class="box-img"></div>
                <div>墓位查询</div>
            </div>
            <div class="box box-24" @click="$router.push('/renew')">
                <div class="box-img"></div>
                <div>墓位续费</div>
            </div>
            <div class="box box-3" @click="$router.push('/appointmentRecord')">
                <div class="box-img"></div>
                <div>预约记录</div>
            </div>
            <div class="box box-7" @click="$router.push('/renewalRecord')">
                <div class="box-img"></div>
                <div>续费记录</div>
            </div>
            <!-- <div class="box box-5" @click="$router.push('/informationList')">
                <div class="box-img"></div>
                <div>信息</div>
            </div> -->
            <!-- <div class="box box-3" @click="$router.push('/newsList')">
                <div class="box-img"></div>
                <div>行业新闻</div>
            </div>
            <div class="box box-7" @click="$router.push('/noticeList')">
                <div class="box-img"></div>
                <div>通知公告</div>
            </div>
            <div class="box box-24" @click="$router.push('/appointmentRecord')">
                <div class="box-img"></div>
                <div>预约记录</div>
            </div>
           <div class="box box-10" @click="show1 = true">
                <div class="box-img"></div>
                <div>电话预约</div>
            </div> -->
            <!-- <div class="box box-5"  @click="$router.push(`/funeralParlour?url=/satisfactionSurvey`)"> -->
        </main>
        <van-action-sheet
            v-model:show="show1"
            :actions="actions"
            cancel-text="取消"
            description="0518-96444"
            close-on-click-action
            @select="onSelect"
        />
        <div class="footer">
            <div>版权所有：杭州市第二公墓</div>
        </div>
        <van-popup v-model:show="show2" round :style="{ height: '70%', width: '90%' }">
            <div class="popup-title">预约须知</div>
            <div class="popup-content">
                <div>
                    为满足人民群众对殡仪服务需求，优化殡葬服务机构现场秩序，引导市民群众规范有序地办理逝者“身后事”，在线预约平台自2025年5月1日起正式开放预约，现将有关事项通告如下：
                </div>
                <div>
                    1、自2023年5月1日上午8时起，市民群众可通过“杭州市第二公墓”微信公众号平台预约3天内的告别服务，预约告别厅，需提前一天预约。凭预约记录办理相关服务。
                </div>
                <div>2、仅受理在馆告别预约。</div>
                <div>
                    3、预约提交时，请认真仔细核对，确保信息正确；
                    预约成功后（需要通过审核），可于微信公众号自主查询已预约时间，请勿再重复预约，预约成功后需要提前一天到殡仪馆办理业务。
                </div>
                <div>
                    4、请市民群众合理安排好时间，务必携带好《居民死亡殡葬证》以及逝者身份证、经办人身份证，按照预约的时间提前1天到馆办理相关业务，如有公安部门经办，还需提供公安部门出具的《尸体处理通知书》《死亡证明》等材料，错过预约时间，系统将自动取消您的网上预约。
                </div>
                <div>
                    5、网上预约采用实名制，请在详细阅读预约须知同意后，进入预约信息填写页面进行预约，预约人需保证填写信息的真实性和有效性，否则由此造成的一切后果及责任由预约人承担。根据相关法律法规和政策，请您填写真实的身份信息，若您填写的信息不完整或不准确，则可能无法进行网上预约，为了向你提供服务，需要在法律允许的范围内在后台显示您的预约信息，本程序需您同意《用户服务协议》及《隐私政策》。本程序收集用户手机号码仅用于接收预约成功短信，请务必正确填写。
                </div>
                <!-- <div>6、预约失败或其他任何问题，请致电（xxxxx）咨询。</div> -->
                <van-button
                    type="primary"
                    style="margin-top: 4vw"
                    block
                    :disabled="disabled"
                    @click="$router.push(tipsRouter)"
                >
                    {{ btnText }}
                </van-button>
            </div>
            <!-- <van-button type="primary" block :disabled="disabled" @click="go">{{ btnText }}</van-button> -->
        </van-popup>
    </div>
</template>

<script lang="ts" setup>
    // import { markRaw, reactive, ref, toRaw, onMounted, onBeforeMount, readonly } from 'vue';
    // import type { Ref, Raw } from 'vue';
    import { useRoute } from 'vue-router';
    import { useWeixinLogin1 } from '@/hooks';
    const route = useRoute();
    // 微信授权并且跳转到对应页面
    // useWeixinLogin1(route.query.redirect);

    const show1: Ref<boolean> = ref(false);
    const actions = reactive([{ name: '呼叫' }]);
    const show2: Ref<boolean> = ref(false);
    const disabled: Ref<boolean> = ref(true);
    const timing: Ref<number> = ref(5);
    const btnText: Ref<string> = ref('5s');
    const tipsRouter: Ref<string> = ref('');
    const interval = ref();

    const tips = (val) => {
        tipsRouter.value = val;
        show2.value = true;
        clearInterval(interval.value);
        disabled.value = true;
        timing.value = 5;
        btnText.value = '5s';
        interval.value = setInterval(() => {
            if (timing.value > 1) {
                timing.value--;
                btnText.value = timing.value + 's';
            } else if (timing.value <= 1) {
                disabled.value = false;
                btnText.value = '同意';
            } else {
                clearInterval(interval.value);
            }
        }, 1000);
    };
    const onSelect = (item) => {
        // 默认情况下点击选项时不会自动收起
        // 可以通过 close-on-click-action 属性开启自动收起
        // this.show1 = false;
        location.href = 'tel://' + '0523-96444';
    };
    const goHref = (url) => {
        location.href = url;
    };
</script>
<style lang="scss" scoped>
    .home {
        @include padding-global;
        width: 100vw;
        height: 100vh;
        // padding: 6px 15px;
        box-sizing: border-box;
        // background-image: linear-gradient(#9ab4fd, #ffffff);
        background-image: url('@/assets/img/bg/bg5.png');
        // background-position: 40% 0;
        // background-size: cover;
        background-size: 100% 100%;
        overflow: scroll;
        text-align: center;
    }
    .title1 {
        width: 350px;
        margin: 0 auto;
        // padding-top: 20px;
        padding-top: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .logo {
        width: 40px;
        height: 40px;
        background: url('@/assets/img/logo.png');
        background-size: 100% 100%;
        border-radius: 50%;
    }
    .title1-text {
        padding-left: 10px;
        font-size: 19px;
        font-weight: bold;
        color: #fff;
        text-shadow: 0 0 10px #484848;
    }
    .title2 {
        padding-top: 20px;
        font-size: 16px;
        font-weight: 600;
        color: #fff;
        text-shadow: 0 0 5px #484848;
    }
    main {
        margin: 0 auto;
        padding-top: 40px;
        display: flex;
        // justify-content: space-between;
        // align-content: space-around;
        flex-wrap: wrap;
        width: 300px;
        // height: 400px;
        height: 300px;
        .box {
            // width: 148px;
            width: 90px;
            height: 90px;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            align-items: center;
            // color: #f5f5f5;
            // color: #868484;
            color: #fffbfb;
            font-weight: bold;
            font-size: 14px;
            border-radius: 20px;
            margin: 0px;
        }
        .box:not(:nth-child(3n)) {
            margin-right: 15px;
        }
        .box-1 {
            // background-color: rgb(50,180,72);
            background-color: rgba(255, 255, 255, 0.5);

            // background-image: url('@/assets/img/home/box-1-t.png');
            // background-size: 60px 60px;
            // background-repeat: no-repeat;
            // background-position: 200% -40%;
            .box-img {
                width: 40px;
                height: 40px;
                background: url('@/assets/img/home/box-1.png');
                background-size: 100% 100%;
                margin: 10px 0 0 0;
            }
        }
        .box-2 {
            // background-color: rgb(342,105,66);
            background-color: rgba(255, 255, 255, 0.5);

            // background-image: url('@/assets/img/home/box-2-t.png');
            // background-size: 60px 60px;
            // background-repeat: no-repeat;
            // background-position: 230% -40%;
            .box-img {
                width: 40px;
                height: 40px;
                background: url('@/assets/img/home/box-2.png');
                background-size: 100% 100%;
                margin: 10px 0 0 0;
            }
        }
        .box-3 {
            // background-color: rgb(2,183,238);
            background-color: rgba(255, 255, 255, 0.5);

            // background-image: url('@/assets/img/home/box-3-t.png');
            // background-size: 60px 60px;
            // background-repeat: no-repeat;
            // background-position: 220% -40%;
            .box-img {
                width: 40px;
                height: 40px;
                background: url('@/assets/img/home/box-3.png');
                background-size: 100% 100%;
                margin: 10px 0 0 0;
            }
        }
        .box-4 {
            // background-color: rgb(178,125,217);
            background-color: rgba(255, 255, 255, 0.5);

            // background-image: url('@/assets/img/home/box-4-t.png');
            // background-size: 60px 60px;
            // background-repeat: no-repeat;
            // background-position: 220% -40%;
            .box-img {
                width: 40px;
                height: 40px;
                background: url('@/assets/img/home/box-4.png');
                background-size: 100% 100%;
                margin: 10px 0 0 0;
            }
        }
        .box-5 {
            // background-color: rgb(21,189,154);
            background-color: rgba(255, 255, 255, 0.5);

            // background-image: url('@/assets/img/home/box-5-t.png');
            // background-size: 60px 60px;
            // background-repeat: no-repeat;
            // background-position: 200% -40%;
            .box-img {
                width: 40px;
                height: 40px;
                background: url('@/assets/img/home/box-5.png');
                background-size: 100% 100%;
                margin: 10px 0 0 0;
            }
        }
        .box-6 {
            // background-color: rgb(161,79,115);
            background-color: rgba(255, 255, 255, 0.5);

            // background-image: url('@/assets/img/home/box-6-t.png');
            // background-size: 60px 60px;
            // background-repeat: no-repeat;
            // background-position: 230% -40%;
            .box-img {
                width: 40px;
                height: 40px;
                background: url('@/assets/img/home/box-6.png');
                background-size: 100% 100%;
                margin: 10px 0 0 0;
            }
        }
        .box-7 {
            // background-color: rgb(103, 104, 97);
            background-color: rgba(255, 255, 255, 0.5);

            // background-image: url('@/assets/img/home/box-7-t.png');
            // background-size: 60px 60px;
            // background-repeat: no-repeat;
            // background-position: 200% -40%;
            .box-img {
                width: 40px;
                height: 40px;
                background: url('@/assets/img/home/box-7.png');
                background-size: 100% 100%;
                margin: 10px 0 0 0;
            }
        }
        .box-8 {
            // background-color: rgb(90,88,185);
            background-color: rgba(255, 255, 255, 0.5);

            // background-image: url('@/assets/img/home/box-8-t.png');
            // background-size: 60px 60px;
            // background-repeat: no-repeat;
            // background-position: 220% -40%;
            .box-img {
                width: 40px;
                height: 40px;
                background: url('@/assets/img/home/box-8.png');
                background-size: 100% 100%;
                margin: 10px 0 0 0;
            }
        }
        .box-9 {
            // background-color: rgb(118,161,79);
            background-color: rgba(255, 255, 255, 0.5);

            // background-image: url('@/assets/img/home/box-9-t.png');
            // background-size: 60px 60px;
            // background-repeat: no-repeat;
            // background-position: 200% -40%;
            .box-img {
                width: 40px;
                height: 40px;
                background: url('@/assets/img/home/box-9.png');
                background-size: 100% 100%;
                margin: 10px 0 0 0;
            }
        }
        .box-10 {
            // background-color: rgb(118,161,79);
            background-color: rgba(255, 255, 255, 0.5);

            // background-image: url('@/assets/img/home/box-9-t.png');
            // background-size: 60px 60px;
            // background-repeat: no-repeat;
            // background-position: 200% -40%;
            .box-img {
                width: 40px;
                height: 40px;
                background: url('@/assets/img/home/box-27.png');
                background-size: 100% 100%;
                margin: 10px 0 0 0;
            }
        }
        .box-11 {
            // background-color: rgb(118,161,79);
            background-color: rgba(255, 255, 255, 0.5);

            // background-image: url('@/assets/img/home/box-9-t.png');
            // background-size: 60px 60px;
            // background-repeat: no-repeat;
            // background-position: 200% -40%;
            .box-img {
                width: 40px;
                height: 40px;
                background: url('@/assets/img/home/box-11.png');
                background-size: 100% 100%;
                margin: 10px 0 0 0;
            }
        }
        .box-12 {
            // background-color: rgb(118,161,79);
            background-color: rgba(255, 255, 255, 0.5);

            // background-image: url('@/assets/img/home/box-9-t.png');
            // background-size: 60px 60px;
            // background-repeat: no-repeat;
            // background-position: 200% -40%;
            .box-img {
                width: 40px;
                height: 40px;
                background: url('@/assets/img/home/box-12.png');
                background-size: 100% 100%;
                margin: 10px 0 0 0;
            }
        }
        .box-17 {
            // background-color: rgb(118,161,79);
            background-color: rgba(255, 255, 255, 0.5);

            // background-image: url('@/assets/img/home/box-9-t.png');
            // background-size: 60px 60px;
            // background-repeat: no-repeat;
            // background-position: 200% -40%;
            .box-img {
                width: 40px;
                height: 40px;
                background: url('@/assets/img/home/box-17.png');
                background-size: 100% 100%;
                margin: 10px 0 0 0;
            }
        }
        .box-23 {
            // background-color: rgb(118,161,79);
            background-color: rgba(255, 255, 255, 0.5);

            // background-image: url('@/assets/img/home/box-9-t.png');
            // background-size: 60px 60px;
            // background-repeat: no-repeat;
            // background-position: 200% -40%;
            .box-img {
                width: 40px;
                height: 40px;
                background: url('@/assets/img/home/box-23.png');
                background-size: 100% 100%;
                margin: 10px 0 0 0;
            }
        }
        .box-24 {
            // background-color: rgb(118,161,79);
            background-color: rgba(255, 255, 255, 0.5);

            // background-image: url('@/assets/img/home/box-9-t.png');
            // background-size: 60px 60px;
            // background-repeat: no-repeat;
            // background-position: 200% -40%;
            .box-img {
                width: 40px;
                height: 40px;
                background: url('@/assets/img/home/box-24.png');
                background-size: 100% 100%;
                margin: 10px 0 0 0;
            }
        }
        .box-26 {
            // background-color: rgb(118,161,79);
            background-color: rgba(255, 255, 255, 0.5);

            // background-image: url('@/assets/img/home/box-9-t.png');
            // background-size: 60px 60px;
            // background-repeat: no-repeat;
            // background-position: 200% -40%;
            .box-img {
                width: 40px;
                height: 40px;
                background: url('@/assets/img/home/box-26.png');
                background-size: 100% 100%;
                margin: 10px 0 0 0;
            }
        }
    }
    .footer {
        color: #fff;
        font-size: 13px;
    }
    :deep(.van-popup) {
        display: flex;
        flex-direction: column;
    }
    .popup-title {
        color: $font-color-global;
        font-size: 18px;
        font-weight: bold;
        padding-top: 10px;
    }
    .popup-content {
        @include padding-global;
        // padding-top: 20px;
        text-indent: 30px;
        text-align: left;
        font-size: 16px;
        padding-bottom: 30px;
        flex: 1;
        overflow: scroll;
    }
</style>
